<template>
	<div class="app-container">
		<!--操作按钮-->
		<div style="padding-bottom: 30px;" class="operation_container">
			<ul>
				<li><el-button size="mini" @click="handleCancel">返回</el-button></li>
				<li><el-button size="mini" type="primary" @click="handleSubmit">保存</el-button></li>
			</ul>
		</div>
		<el-tabs v-model="activeName" type="border-card">
			<el-tab-pane label="基本信息" name="1">
				<el-form ref="form" :model="data" :rules="rules" :inline="true" size="mini" label-width="125px">
					<el-row :gutter="24" class="form-item-group">
						<el-col :span="6">
							<el-form-item label="订单号：">
								<el-input v-model="data.purchaseOrderNo" disabled placeholder="系统自动生成" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="结算依据：">
								<el-select v-model="data.freightSettleBasedon" filterable clearable>
									<el-option v-for="item in selects.settledBasedOnList" :key="item.key"
										:label="item.label" :value="item.key" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="结算方式：">
								<el-select v-model="data.freightBlancetype" filterable clearable>
									<el-option v-for="item in selects.blanceTypeList" :key="item.key"
										:label="item.label" :value="item.key" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="付款方式：">
								<el-select v-model="data.freightPaymenttype" filterable clearable>
									<el-option v-for="item in selects.paymentTypeList" :key="item.key"
										:label="item.label" :value="item.key" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24" class="form-item-group">
						<el-col :span="6">
							<el-form-item label="卖家发货人：">
								<el-input v-model="data.supplierName" class="filter-item" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="发货人电话：">
								<el-input v-model="data.salesPhone" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="发货人地址：">
								<el-input v-model="data.pickupAddress" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="上门取货：">
								<el-radio-group v-model="data.needPickYn">
									<el-radio v-for="item in selects.ynTypeList" :key="item.key"
										:label="item.key">{{ item.label }}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24" class="form-item-group">
						<el-col :span="6">
							<el-form-item label="买家收货人：">
								<el-input v-model="data.consigneeName" class="filter-item" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="收货人电话：">
								<el-input v-model="data.consigneePhone" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="收货人地址：">
								<el-input v-model="data.deliveryAddress" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="是否加急：" size="mini">
								<el-radio-group v-model="data.isHotYn">
									<el-radio v-for="item in selects.ynTypeList" :key="item.key"
										:label="item.key">{{ item.label }}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24" class="form-item-group">
						<el-col :span="6">
							<el-form-item label="要求发货时间：">
								<el-date-picker v-model="data.expectReceiptDate" type="date" placeholder="选择日期" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="服务类型：" size="mini">
								<el-select v-model="data.freightServiceType" filterable clearable>
									<el-option v-for="item in selects.freightServiceTypeList" :key="item.key"
										:label="item.label" :value="item.key" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-input v-model="data.supplierId" type="hidden" />
					<el-input v-model="data.consigneeId" type="hidden" />
				</el-form>
				<el-row>
					<el-col :span="6">
						<div style="height: 600px;">
							<div v-for="item in logisticsData" :key="item.id" class="logistics-item">
								<div class="logistics-box">
									<div class="logistics-dot"></div>
								</div>
								<div class="logistics-content">
									<div class="logistics-time">{{ item.time }}</div>
									<div class="logistics-info">
										<div class="logistics-location">{{ item.location }}</div>
										<div class="logistics-status">{{ item.status }}</div>
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="17">
						<div class="map-container">
							<div id="map" class="map"></div>
						</div>
					</el-col>
				</el-row>

			</el-tab-pane>
			<el-tab-pane label="货物明细" name="2">
			<el-table :data="data.itemVoList" border stripe fit highlight-current-row>
			   <el-table-column label="物料描述" align="center" prop="materialDescribe" width="150px" />
			   <el-table-column label="子品牌" align="center" prop="vehicleName" width="150px" />
			   <el-table-column label="提车时间" align="center" prop="pickupStartDate" width="150px" />
			   <el-table-column label="提车人" align="center" prop="contactName" width="150px" />
			   <el-table-column label="SAP交货单" align="center" prop="pickupVoucherList" width="150px" />
			   <el-table-column label="库存地点描述" align="center" prop="pickUpWarehouseNo" width="150px" />
			   <el-table-column label="收车市" align="center" prop="pickupCity" width="150px" />
			   <el-table-column label="收车单位" align="center" prop="consigneeName" width="150px" />
				<el-table-column align="center" label="序" width="95">
					<template slot-scope="scope">
						<span>{{ scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column label="货物名称" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.materialName }}</span>
					</template>
				</el-table-column>
			
				<el-table-column label="发货数量" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.orderQuantity }}</span>
					</template>
				</el-table-column>
			</el-table>
			</el-tab-pane>
			<el-tab-pane label="运单明细" name="3">

				<el-button type="primary" icon="el-icon-truck" @click="openDispatchDialog()">发车配载</el-button>

				<el-table :data="data.freightList" border stripe fit highlight-current-row
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" align="center" width="40" />
					<el-table-column align="center" label="序" width="95">
						<template slot-scope="scope">
							<span>{{ scope.$index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column label="货物名称" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.cargoFreightName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="运输类型" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.serviceType }}</span>
						</template>
					</el-table-column>
					<el-table-column label="发货人地址" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.departureAddr }}</span>
						</template>
					</el-table-column>
					<el-table-column label="收货人" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.consignee }}</span>
						</template>
					</el-table-column>
					<el-table-column label="收货人地址" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.consigneeAddress }}</span>
						</template>
					</el-table-column>
					<el-table-column label="结算基于" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.settleBasedOn }}</span>
						</template>
					</el-table-column>
					<el-table-column label="重量" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.weight }}</span>
						</template>
					</el-table-column>
					<el-table-column label="体积" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.volume }}</span>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		<el-tab-pane label="发货明细" name="4">
			<el-table :data="data.distributionList" border stripe fit highlight-current-row>
				<el-table-column align="center" label="序" width="95">
					<template slot-scope="scope">
						<span>{{ scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column label="商品车型号" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.vehicleModel }}</span>
					</template>
				</el-table-column>
				<el-table-column label="收货人地址" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.deliveryAddress }}</span>
					</template>
				</el-table-column>
		    <el-table-column label="商品车品牌" align="center">
		    	<template slot-scope="scope">
		    		<span>{{ scope.row.vehicleBrand }}</span>
		    	</template>
		    </el-table-column>
				<el-table-column label="vin" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.vinNo }}</span>
					</template>
				</el-table-column>
			</el-table>
		</el-tab-pane>
		</el-tabs>
		<div class="dialog_container">
			<el-dialog :title="dispatchDialog.title" :close-on-click-modal="false" :before-close="closeDispatchDialog"
				:visible.sync="dispatchDialog.visible" width="35%">
				<el-form :model="dispatchDialogData" label-position="right" label-width="120px" class="dialog_form">
					<el-form-item size="mini" label="承运人：" prop="carrierName">
						<el-select v-model="dispatchDialogData.carrierId" @change="handleCarrierChange" clearable>
							<el-option v-for="item in selects.carrierList" :key="item.id" :label="item.carrierName"
								:value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item size="mini" label="司机姓名：" prop="drivename">
						<el-select v-model="dispatchDialogData.vehicleInfoId" @change="handleVehicleInfoChange"
							clearable>
							<el-option v-for="item in selects.vehicleInfoList" :key="item.id"
								:label="item.vehicleModelNo" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item size="mini" label="司机电话：" prop="cellNo">
						<el-input v-model="dispatchDialogData.cellNo" />
					</el-form-item>
					<el-form-item size="mini" label="车牌号：">
						<el-input v-model="dispatchDialogData.vehicleNo" />
					</el-form-item>
					<el-form-item size="mini" label="车(船)号：">
						<el-input v-model="dispatchDialogData.vehicleIdentity" />
					</el-form-item>
					<el-form-item size="mini" label="发布运输出价：">
						<el-input v-model="dispatchDialogData.publishDriverPrice" type="number" />
					</el-form-item>
					<el-form-item size="mini" label="要求车长：">
						<el-select v-model="dispatchDialogData.vehicleModelId" @change="handleVehicleModelChange"
							clearable>
							<el-option v-for="item in selects.vehicleModelList" :key="item.id"
								:label="item.vehicleModelDesc" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="closeDispatchDialog()">取消</el-button>
					<el-button type="primary" @click="confirmDispatchDialog()">保存</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>


<script>
	import waves from '@/directive/waves'
	import appConstant from '@/constant/AppConstant'
	import PurchaseOrderApi from '@/api/tms/TPoPurchaseOrderApi'

	import CarrierApi from '@/api/basic/CarrierApi'
	// import VehicleInfoApi from '@/api/basic/VehicleInfoApi'
	// import VehicleModelApi from '@/api/basic/VehicleModelApi'
	import appConfig from "@/config/AppConfig";
	export default {
		directives: {
			waves
		},
		data() {
			return {
				logisticsData: [{
						id: 1,
						time: "2023-08-30 09:00",
						location: "运单发布",
						status: "TM20210720000001",
					},
					{
						id: 2,
						time: "2023-08-30 12:30",
						location: "运单生成",
						status: "TM20210720000001",
					},
					{
						id: 3,
						time: "2023-08-30 09:00",
						location: "分配承运商",
						status: "",
					},
					{
						id: 4,
						time: "2023-08-30 12:30",
						location: "订单接收",
						status: "",
					},
					{
						id: 5,
						time: "2023-08-30 09:00",
						location: "分配承运商",
						status: "",
					},
					{
						id: 6,
						time: "2023-08-30 12:30",
						location: "订单接收",
						status: "",
					},
					{
						id: 7,
						time: "2023-08-30 12:30",
						location: "订单接收",
						status: "",
					}
					// 添加更多物流轨迹数据...
				],
				activeName: '1',
				selects: {
					ynTypeList: appConstant.ynTypeList,
					freightServiceTypeList: appConstant.freightServiceTypeList,
					freightOrderTypeList: appConstant.freightOrderTypeList,
					materialTransUnitList: appConstant.materialTransUnitList,
					paymentTypeList: appConstant.paymentTypeList,
					settledBasedOnList: appConstant.settledBasedOnList,
					blanceTypeList: appConstant.blanceTypeList,
					categoryList: appConstant.categoryList,
					packingList: appConstant.packingList,
					weightMeasUnitList: appConstant.weightMeasUnitList,
					locationList: [],
					carrierList: [],
					vehicleInfoList: [],
					vehicleModelList: []
				},
				operation: undefined,
				data: {
					isValid: appConstant.Y,
					itemVoList: [],
					freightList: []
				},
				// 校验规则的名称必须和校验字段的名称一致
				multipleSelection: [],
				carrierSelectorVisible: false,
				vehicleInfoSelectorVisible: false,
				dispatchDialog: {
					title: '整车配载',
					visible: false
				},
				dispatchDialogData: {
					carrierId: '',
					vehicleInfoId: '',
					driveNo: '',
					drivename: '',
					freightItems: [],
					cellNo: '',
					vehicleNo: '',
					vehicleIdentity: '',
					vehicleModelDesc: ''
				},
				rules: {}
			}
		},
		created() {
			this.initForm()
			this.loadSelects()
		},
		mounted() {
			this.initMap();
		},
		methods: {
			initMap() {
				const map = new BMap.Map('map');
				const point = new BMap.Point(116.404, 39.915);
				map.centerAndZoom(point, 12);

				const purplePoints = this.generateRandomPoints(100);
				const greenPoints = this.generateRandomPoints(100);

				// 创建紫色线
				const purplePolyline = new BMap.Polyline(purplePoints, {
					strokeColor: 'purple',
					strokeWeight: 3,
					strokeOpacity: 0.7,
				});
				map.addOverlay(purplePolyline);

				// 创建绿色线
				const greenPolyline = new BMap.Polyline(greenPoints, {
					strokeColor: 'green',
					strokeWeight: 3,
					strokeOpacity: 0.7,
				});
				map.addOverlay(greenPolyline);

				// 添加紫色线的起点和终点标记
				const purpleStartMarker = new BMap.Marker(purplePoints[0]);
				const purpleEndMarker = new BMap.Marker(purplePoints[purplePoints.length - 1]);
				map.addOverlay(purpleStartMarker);
				map.addOverlay(purpleEndMarker);

				// 添加绿色线的起点和终点标记
				const greenStartMarker = new BMap.Marker(greenPoints[0]);
				const greenEndMarker = new BMap.Marker(greenPoints[greenPoints.length - 1]);
				map.addOverlay(greenStartMarker);
				map.addOverlay(greenEndMarker);

				const centerPoint = new BMap.Point(116.404, 39.915);
				      const marker = new BMap.Marker(centerPoint);
				      map.addOverlay(marker);

				      const labelContent = '预警消息';
				      const labelOffset = new BMap.Size(-30, -30);
				      const label = new BMap.Label(labelContent, { offset: labelOffset });
				      marker.setLabel(label);
			},
			generateRandomPoints(count) {
				const points = [];
				const center = new BMap.Point(116.404, 39.915);
				const radius = 0.1;
				for (let i = 0; i < count; i++) {
					const angle = Math.random() * Math.PI * 2;
					const dx = Math.cos(angle) * radius;
					const dy = Math.sin(angle) * radius;
					const point = new BMap.Point(center.lng + dx, center.lat + dy);
					points.push(point);
				}
				return points;
			},
			initForm() {
				const id = this.$route.params.id
				if (id) {
					this.operation = 'edit'
					PurchaseOrderApi.get(id).then(response => {
						this.data = response.data
					})
				} else {
					this.operation = 'add'
				}
			},
			loadSelects() {
				CarrierApi.list().then(response => {
					this.selects.carrierList = response.data
					console.log(this.selects.carrierList)
				})

				VehicleInfoApi.page({}, {
					currentPage: 1,
					pageSize: 100
				}).then(response => {
					this.selects.vehicleInfoList = response.data.rows
					console.log(this.selects.vehicleInfoList)
				})
				VehicleModelApi.list().then(response => {
					this.selects.vehicleModelList = response.data
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			openDispatchDialog() {
				if (this.multipleSelection && this.multipleSelection.length) {
					this.dispatchDialog.visible = true
				} else {
					this.$message.warning('请选择数据')
				}
			},
			closeDispatchDialog() {
				this.dispatchDialog = {
					title: '整车配载',
					visible: false
				}
				this.dispatchDialogData = {
					driveNo: '',
					drivename: '',
					cellNo: '',
					vehicleNo: '',
					vehicleIdentity: '',
					vehicleModelDesc: ''
				}
			},
			confirmDispatchDialog() {
				this.dispatchDialogData.freightItems = this.multipleSelection
				if (this.dispatchDialogData.driveNo !== '') {
					const params = {
						driver: this.dispatchDialogData.driveNo,
						orderId: this.dispatchDialogData.orderId,
						carrierNo: this.dispatchDialogData.carrierNo
					}
					FreightVehicleDispatchApi.createFtlDispatch(params).then(() => {
						this.$message.success('配载成功!')
						this.closeDispatchDialog()
					})
				} else {
					this.$message.warning('请选择承运人或司机')
				}
			},
			handleCarrierChange(id) {
				this.dispatchDialogData.carrierNo = undefined
				this.dispatchDialogData.carrierName = undefined
				CarrierApi.get(id).then(response => {
					this.dispatchDialogData.carrierNo = response.data.id
					this.dispatchDialogData.carrierName = response.data.carrierName
				})
			},
			handleVehicleInfoChange(id) {
				this.dispatchDialogData.driveNo = undefined
				this.dispatchDialogData.drivename = undefined
				this.dispatchDialogData.cellNo = undefined
				this.dispatchDialogData.vehicleNo = undefined
				this.dispatchDialogData.vehicleIdentity = undefined
				VehicleInfoApi.get(id).then(response => {
					this.dispatchDialogData.driveNo = response.data.driveNo
					this.dispatchDialogData.drivename = response.data.drivename
					this.dispatchDialogData.cellNo = response.data.cellNo
					this.dispatchDialogData.vehicleNo = response.data.vehicleNo
					this.dispatchDialogData.vehicleIdentity = response.data.vehicleIdentity
				})
			},
			handleVehicleModelChange(id) {
				this.dispatchDialogData.vehicleModelDesc = undefined
				VehicleModelApi.get(id).then(response => {
					this.dispatchDialogData.vehicleModelDesc = response.data.vehicleModelDesc
				})
			},
			handleCancel() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.logistics-item {
		display: flex;
		align-items: center;
		margin: 20px 0;
	}

	.map-container {
		width: 100%;
		height: 600px;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.logistics-box {
		position: relative;
		width: 10px;
		height: 60px;
	}

	.logistics-box::before {
		content: "";
		position: absolute;
		left: 4px;
		top: 0;
		bottom: 0;
		width: 2px;
		background-color: rgba(128, 128, 128, 0.3);
		/* 灰色长方体，带透明度 */
	}

	.logistics-dot {
		width: 12px;
		height: 12px;
		background-color: #3366cc;
		/* 深蓝色圆点 */
		border-radius: 50%;
		position: relative;
		z-index: 1;
	}

	.logistics-content {
		display: flex;
		align-items: center;
		margin-left: 20px;
	}

	.logistics-time {
		width: 100px;
		text-align: center;
		font-weight: bold;
	}

	.logistics-info {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
	}

	.logistics-location {
		font-weight: bold;
	}

	.logistics-status {
		color: #888;
	}
</style>
